<template>
  <div class="lc-navbar">
    <div class="lc-navbar-container">
      <div class="lc-navbar-item">
        <a-space size="large">
          <div class="lc-navbar-logo" @click="onHome">
            <a-image width="25" :src="ImageUrl('icons/logo.svg')" />
            <div class="lc-navbar-logo-label">{{ $t("logo") }}</div>
          </div>
          <a-input-search
            :style="{ width: '210px' }"
            :placeholder="$t('input.search')"
          />
        </a-space>
      </div>
      <div class="lc-navbar-item">
        <slot></slot>
      </div>
      <div class="lc-navbar-item">
        <a-space>
          <a-dropdown trigger="hover">
            <a-button type="text">
              <template #icon>
                <icon-translate
                  :size="18"
                  class="lc-navbar-btn-icon pointer"
                /> </template
            ></a-button>
            <template #content>
              <a-doption
                v-for="(item, key) in language"
                :key="key"
                :class="{ 'lc-navbar-pitch': useGlobal.locale == key }"
                @click="useGlobal.localeClick(key)"
              >
                <div class="lc-doption-item">
                  <div class="lc-doption-icon">
                    <icon-check v-show="useGlobal.locale == key" />
                  </div>
                  {{ item.name }}
                </div>
              </a-doption>
            </template>
          </a-dropdown>
          <a-dropdown trigger="hover">
            <a-button type="text">
              <template #icon>
                <icon-desktop
                  :size="18"
                  class="lc-navbar-btn-icon pointer"
                /> </template
            ></a-button>
            <template #content>
              <a-doption
                :class="{ 'lc-navbar-pitch': useGlobal.themeType == 'light' }"
                @click="useGlobal.themeClick('light')"
              >
                <div class="lc-doption-item">
                  <div class="lc-doption-icon">
                    <icon-check v-if="useGlobal.themeType == 'light'" />
                  </div>
                  {{ $t("theme.light") }}
                </div>
              </a-doption>
              <a-doption
                :class="{ 'lc-navbar-pitch': useGlobal.themeType == 'dark' }"
                @click="useGlobal.themeClick('dark')"
              >
                <div class="lc-doption-item">
                  <div class="lc-doption-icon">
                    <icon-check v-if="useGlobal.themeType == 'dark'" />
                  </div>
                  {{ $t("theme.dark") }}
                </div>
              </a-doption>
              <a-doption
                :class="{
                  'lc-navbar-pitch': useGlobal.themeType == 'system',
                }"
                @click="useGlobal.themeClick('system')"
              >
                <div class="lc-doption-item">
                  <div class="lc-doption-icon">
                    <icon-check v-if="useGlobal.themeType == 'system'" />
                  </div>
                  {{ $t("theme.system") }}
                </div>
              </a-doption>
            </template>
          </a-dropdown>
          <a-trigger position="top" auto-fit-position :unmount-on-close="false">
            <a-button type="text">
              <template #icon>
                <a-badge :count="9" dot :offset="[2, -2]">
                  <icon-notification
                    :size="18"
                    class="lc-navbar-btn-icon pointer"
                  />
                </a-badge> </template
            ></a-button>
            <template #content>
              <div class="lc-navbar-notification">
                <a-empty />
              </div>
            </template>
          </a-trigger>
          <a-button
            type="text"
            shape="circle"
            style="color: var(--color-text-1)"
            @click="onBack()"
          >
            <icon-settings :size="18" />
          </a-button>
          <a-dropdown>
            <a-avatar :size="34" class="pointer">{{
              useUser.userInfo?.name || $t("user.userName")
            }}</a-avatar>
            <template #content>
              <a-doption>{{ $t("user.loginButton") }}</a-doption>
              <a-doption @click="onQuit()">{{ $t("user.logout") }}</a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ImageUrl from "@/utils/ImageUrl";
import { language } from "@/locales/index.ts";
import { useGlobalStore, useUserStore } from "@/store/global";
import router from "@/router/index";
const useUser = useUserStore();
const useGlobal = useGlobalStore();
const onBack = () => {
  router.push("/admin");
};
const onHome = () => {
  router.push("/");
};
const onQuit = () => {
  useUser.logout();
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}

.lc-navbar {
  outline: none;
  position: fixed;
  width: 100%;
  z-index: 999;

  .lc-navbar-container {
    padding: 0 34px;
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-2);
    .lc-navbar-item {
      &:nth-of-type(1) {
        flex: 2;
      }
      &:nth-of-type(2) {
        flex: content;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:nth-of-type(3) {
        flex: 2;
        .arco-space {
          float: right;
        }
      }
    }

    .lc-navbar-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      cursor: pointer;

      .lc-navbar-logo-label {
        font-size: 20px;
        font-weight: 600;
        color: var(--color-text-1);
        margin-left: 6px;
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "微软雅黑", Arial, sans-serif;
      }
    }

    .lc-navbar-btn-icon {
      color: var(--color-text-1);
    }
  }
}

.lc-navbar-notification {
  padding: 10px;
  width: 200px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
.lc-doption-item {
  padding: 0 4px;
  .lc-doption-icon {
    display: inline-block;
    width: 18px;
  }
}
.lc-navbar-pitch {
  color: rgb(var(--arcoblue-6));
}
</style>
